<!doctype html>

<html>
  <head>
    <title>Open Schedule: {{semester}}</title>
    <link rel="stylesheet" type="text/css"
    href="{{url_for('static', filename="bootstrap.css")}}"/>
    <link rel="stylesheet" type="text/css"
    href="{{url_for('static', filename="style.css")}}"/>
    <script src="{{url_for('static',
      filename="jquery-1.6.2.min.js")}}"></script>
    <script src="{{url_for('static',
      filename="openschedule.js")}}"></script>
    <script>
      function trigger_update_grid(e) {
        var dur = $("#dur").val();
        var where = $("#where").val();
        var courses = $("#avoid").val();
        var d1 = $.Deferred();
        var d2 = $.Deferred();

        $(".timegrid td.timeslot").css('background', '#555').html("");
        $.getJSON("{{url_for('closed_query')}}",
          {semester: "{{semester}}", courses: courses},
          function(data, status) {
            console.debug("closed:", data);
            d1.data = data;
            d1.resolve();
          });
        $.getJSON("{{url_for('open_query')}}",
          {where: where, dur: dur, semester:"{{semester}}"},
          function(data, status) {
            d2.data = data;
            d2.resolve();
          });
        $.when(d1, d2).then(function() {
          $(".timegrid td.timeslot")
            .removeClass(".occupied")
            .css('background', '#fff')
            .data('locations', null);
          overlay_grid(d1.data, paint_occupied);
          overlay_grid(d2.data, paint_available);
        });
      }
      $(function() {
        render_grid("#grid");
        $("#update").click(function(e) {
          trigger_update_grid();
          return false;
        });
        /*
        $("#where, #avoid").keypress(trigger_update_grid);
        $("#dur").change(trigger_update_grid);
        */
        $(".timeslot").mouseenter(function(e) {
          var L = $(this).data('locations');
          $("#locations").empty();
          if(L)
            for(var i in L) {
              var loc = L[i];
              $("#locations").append($('<li>').html(
                loc.location + ", " + loc.capacity));
            }
        });
      });
    </script>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="span8">
          <div id="grid"></div>
        </div>
        <div class="span4">
          <div class="row">
            <form>
              <fieldset>
                <div class="clearfix success">
                  <label>WHERE</label>
                  <div class="input">
                    <textarea id="where"></textarea>
                  </div>
                </div>
                <div class="clearfix error">
                  <label>AVOID</label>
                  <div class="input">
                    <textarea id="avoid"></textarea>
                  </div>
                </div>

                <div class="clearfix">
                  <label>DURATION</label>
                  <div class="input">
                    <select class="medium" id="dur">
                      <option value="90" selected=1>1.5 HR</option>
                      <option value="120">2 HR</option>
                      <option value="180">3 HR</option>
                    </select>
                  </div>
                </div>
                <div class="action">
                  <input type="submit" class="btn primary" value="Update" id="update"></input>
                </div>
              </fieldset>
            </form>
          </div>
          <div class="row">
            <div style="height: 200px; overflow-y: scroll;">
              <ul class="alert-message block-message" id="locations"
                 style="200px"></ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
